<template>
<!--  <div class="banner" v-if="list">-->
<!--    <el-image :src="list.photo"></el-image>-->
<!--  </div>-->
  <div v-if="list" class="container flex flex-col w-[1280px] m-auto my-3">
    <el-breadcrumb class="py-2" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-if="categoryName" :to="{ path: `/article/${categoryId}` }">{{ categoryName }}</el-breadcrumb-item>
<!--      <el-breadcrumb-item>{{ list.count }}</el-breadcrumb-item>-->
    </el-breadcrumb>

    <el-card :title="`标题`" class="w-7xl m-auto mt-10">
      <template v-for="(item,index) in list">
        <a :href="`/article/detail/${item.articleId}`" target="_blank" class="title text-3xl text-center">{{ item.title }}</a>
        <div v-html="item.content">
        </div>
      </template>
    </el-card>
    <div class="flex flex-wrap justify-between w-[1280px] m-auto my-3">

      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>
      <div class="w-[155px] h-[218px] bg-gray-300"></div>

    </div>
  </div>
  <div v-if="!list">
    <el-empty description="404 页面不存在"></el-empty>
  </div>
</template>
<script setup lang="ts">
import type {ApiResult, PageResult} from "~/api";
import type {Article} from "~/api/cms/article/model";
import {useRequest} from "~/composables/useRequest";

const route = useRoute();
const { query, params } = route;
const { categoryId } = params;

console.log(categoryId,'categoryId')

// 页面信息
const list = ref<Article[] | any>();
const title = ref();
const categoryName = ref();
const count = ref()


// 请求数据
const { data: articleList } = await useRequest<ApiResult<PageResult<Article>>>('/cms/article/page',{
  params: {
    categoryId
  }
})

console.log(articleList);

if (articleList.value) {
  count.value = articleList.value.data?.count;
  list.value = articleList.value.data?.list.map((d,i)=>{
    if(i === 0){
      categoryName.value = d.categoryName;
      useHead({
        title: `${d.categoryName} - 网宿软件`,
        meta: [{ name: "keywords", content: d.title }],
        bodyAttrs: {
          class: "page-container",
        },
        script: [
          {
            children: "console.log('Hello World')",
          },
        ],
      });
    }
    return d;
  });
}
</script>

<style scoped lang="scss">

</style>
